<template>
  <div class="interview-processing-user">
    <h1>面试结果</h1>

    <div v-loading="loading">
      <el-empty v-if="results.length === 0" description="暂无面试结果" />
      
      <el-table v-else :data="results" stripe border>
        <el-table-column prop="record_id" label="记录编号" width="100" />
        <el-table-column prop="company_name" label="企业名称" min-width="150" />
        <el-table-column prop="position_name" label="岗位名称" min-width="150" />
        <el-table-column label="处理状态" width="120">
          <template #default="{ row }">
            <el-tag :type="getProcessStatusType(row.process_status)">
              {{ getProcessStatusText(row.process_status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="180">
          <template #default="{ row }">
            {{ formatDateTime(row.created_at) }}
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-if="pagination.pages > 1"
        class="pagination"
        :current-page="pagination.current"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        layout="prev, pager, next, total"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const loading = ref(false)
const results = ref([])
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  pages: 0
})

// 加载面试结果（所有）
const loadResults = async (page = 1) => {
  loading.value = true
  try {
    const res = await fetch(`http://localhost:7001/api/interview-result?page=${page}&pageSize=10`)
    if (!res.ok) {
      throw new Error(`HTTP error! status: ${res.status}`)
    }
    const json = await res.json()

    if (json && json.code === 200) {
      results.value = json.data || []
      if (json.pagination) {
        pagination.value = json.pagination
      }
    } else {
      results.value = []
      ElMessage.error(json.message || '获取面试结果失败')
    }
  } catch (e) {
    console.error('获取面试结果失败:', e)
    ElMessage.error('获取面试结果失败')
    results.value = []
  } finally {
    loading.value = false
  }
}

// 分页处理
const handlePageChange = (page) => {
  pagination.value.current = page
  loadResults(page)
}

// 格式化日期时间
const formatDateTime = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 获取处理状态文本
const getProcessStatusText = (status) => {
  const statusMap = {
    1: '待处理',
    2: '已通过',
    3: '已打回',
    4: '已过期'
  }
  return statusMap[status] || '未知'
}

// 获取处理状态类型
const getProcessStatusType = (status) => {
  const typeMap = {
    1: 'warning',
    2: 'success',
    3: 'danger',
    4: 'info'
  }
  return typeMap[status] || ''
}

onMounted(() => {
  loadResults()
})
</script>

<style scoped>
.interview-processing-user {
  width: 100%;
  padding: 20px;
}

h1 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 28px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

:deep(.el-table) {
  font-size: 14px;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
}
</style>

